﻿
@{
    ViewData["Title"] = "后台首页";
    Layout = "~/Views/Shared/_Back.cshtml";  
}
<div class="layui-fluid" style="background-color:#5FB878;">
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body " id="app">
                    <blockquote class="layui-elem-quote">
                        欢迎管理员：
                        <span class="x-red">IV</span>
                        ！
                        当前时间:<span>{{ date | formatDate }}</span>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">站点内容统计</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <tbody>
                            <tr>
                                <th>文章</th>
                                <td>@ViewBag.ArticleNum 篇文章</td>
                            </tr>
                            <tr>
                                <th>分类</th>
                                <td>@ViewBag.CategoryNum 个分类</td>
                            </tr>
                            <tr>
                                <th>动态</th>
                                <td>@ViewBag.DynamicNum 条动态</td>
                            </tr>
                            <tr>
                                <th>评论</th>
                                <td>@ViewBag.RemarkNum 条评论</td>
                            </tr>
                            <tr>
                                <th>评论回复</th>
                                <td>@ViewBag.ReplyNum 条回复</td>
                            </tr>
                            <tr>
                                <th>留言</th>
                                <td>@ViewBag.DremarkNum 条留言</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12" >
            <div class="layui-card" >
                <div class="layui-card-header">系统信息</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <tbody>
                            <tr>
                                <th>IVBlog版本</th>
                                <td>1.0</td>
                            </tr>
                            <tr>
                                <th>服务器地址</th>
                                <td>8080</td>
                            </tr>
                            <tr>
                                <th>操作系统</th>
                                <td>windows10</td>
                            </tr>
                            <tr>
                                <th>运行环境</th>
                                <td>windows</td>
                            </tr>
                            <tr>
                                <th>开发软件</th>
                                <td>Visual Studio 2019</td>
                            </tr>
                            <tr>
                                <th>数据库</th>
                                <td>SQL</td>
                            </tr>
                            <tr>
                                <th>开发技术</th>
                                <td>js , css  ,Ajax , C#, bootstrap,.Net</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/js/vue.js"></script>
<script>
    //在月份、日期以及小时等小于10时前面补0
    var padDate = function (val) {
        return val < 10 ? "0" + val : val;
    };
    var vm = new Vue({
        el: "#app",
        data: {
            date: null
        },
        created: function () {
            this.date = new Date();
        },
        mounted: function () {
            //声明一个变量指向Vue实例，保证作用域一致
            var _this = this;
            this.timer = setInterval(function () {
                _this.date = new Date();
            }, 1000);
        },
        beforeDestroy: function () {
            if (this.timer) {
                //在VUE实例被销毁前，清除定时器
                clearInterval(this.timer);
            }
        },
        filters: {
            formatDate: function (val) {
                var currdate = new Date(val);
                var year = currdate.getFullYear();
                var month = padDate(currdate.getMonth() + 1);
                var day = padDate(currdate.getDate());
                var hours = padDate(currdate.getHours());
                var minutes = padDate(currdate.getMinutes());
                var seconds = padDate(currdate.getSeconds());
                return year + "-" + month + "-" + day + "-" + hours + ":" + minutes + ":" + seconds;
            }
        }
    });
</script>


